<template>
  <div class="show-checkbox">
    <div class="select-all">
      <span>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
      </span>
      <span style="margin-left:20px">{{typeName}}</span>
    </div>
    <div class="list-box">
    <el-checkbox-group v-model="checkedList" @change="handleCheckedChange">
      <div style="margin: 10px 0;" v-for="item in list" :key="item.field">
        <el-checkbox :label="item.field" >{{item.label}}</el-checkbox>
      </div>
    </el-checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  props:["listData","typeName"],//[{label,field}]
  data(){
    return{
      checkAll: false,
      checkedList: [],
    }
  },
  computed:{
    list(){
      return JSON.parse(JSON.stringify(this.listData))
      },
    isIndeterminate(){
      return this.checkedList.length > 0 && this.checkedList.length < this.list.length
    }
  },
  methods:{
    handleCheckAllChange(val) {
      this.checkedList = val ? JSON.parse(JSON.stringify(this.listData)).map(item=>item.field) : [];
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.list.length;
    },
  }

}
</script>

<style scoped lang="less">

.show-checkbox{
  width: 156px;
  border: 1px #ccc solid;
  border-radius: 4px;
  height: 266px;
  .select-all{
    padding: 10px 15px;
    border-bottom: 1px #ccc solid;
  }
  .list-box{
    height: 215px;
    overflow: auto;
    padding: 5px 25px;
  }
}

</style>